<template>
  <div class="pk-option">
    <div class="title">{{ title }}</div>
    <div class="type">
      <div class="type-item" v-for="item in types" :key="item">{{ item.label }}</div>
    </div>
    <div class="home-team team">主队</div>
    <div class="guest-team team">客队</div>
    <div class="select">
      <div class="select-group" v-for="(item, index) in options" :key="index">
        <div class="select-item" v-for="(oddsItem, index) in item.odds">
          <el-checkbox v-model="oddsItem.checked" label="" @change="handleChang" />
          <el-input v-model="oddsItem.value" style="width: 64px" @change="handleChang"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const pkCodes = defineModel({ type: Array })
const props = defineProps({
  title: String,
  code: String,
  types: Array,
})

const options = ref([])

onMounted(() => {
  const data = [
    { code: props.code + ':' + props.types[0].code + ':{value}:0', odds: [{}, {}, {}, {}, {}, {}] },
    { code: props.code + ':' + props.types[1].code + ':{value}:0', odds: [{}, {}, {}, {}, {}, {}] },

    { code: props.code + ':' + props.types[0].code + ':{value}:1', odds: [{}, {}, {}, {}, {}, {}] },
    { code: props.code + ':' + props.types[1].code + ':{value}:1', odds: [{}, {}, {}, {}, {}, {}] },
  ]

  data.map(group => {
    let odds = []

    pkCodes.value.map(str => {
      const data = str.split(':')
      const value = data[2]
      data[2] = '{value}'
      const code = data.join(':')

      if (group.code == code) {
        odds.push({ checked: true, value })
      }
    })

    // odds 数组小于6个时补充空对象
    while (odds.length < 6) odds.push({ checked: false, value: '' })

    group.odds = odds
  })

  options.value = data
})

const handleChang = () => {
  const array = []

  options.value.forEach(group => {
    group.odds.forEach(item => {
      if (item.checked && item.value) {
        array.push(group.code.replace('{value}', item.value))
      }
    })
  })

  pkCodes.value = array
}
</script>
<style lang="scss" scoped>
.pk-option {
  position: relative;
  margin-bottom: 40px;
  &:last-child {
    margin-bottom: 0;
  }
}

.title {
  font-size: 14px;
  font-weight: 600;
  color: #252a30;
}

.type {
  display: flex;
  flex-wrap: wrap;
  padding-left: 100px;
  width: 800px;
  color: #778090;
  margin-bottom: 8px;
  .type-item {
    flex: 1;
    text-align: center;
  }
}

.home-team {
  position: absolute;
  top: 34%;
}

.guest-team {
  position: absolute;
  bottom: 16%;
}

.select {
  display: flex;
  flex-wrap: wrap;
  padding-left: 100px;
  width: 800px;
  position: relative;
  &:after {
    position: absolute;
    left: 430px;
    top: 2%;
    content: '';
    width: 1px;
    height: 96%;
    background-color: #ebebeb;
  }
}

.select-group {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  &:nth-child(1),
  &:nth-child(2) {
    margin-bottom: 20px;
  }
}

.select-item {
  margin-right: 24px;
  margin-bottom: 6px;
}

.home-team {
}
</style>
